<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>网页导航</title>
		<style>
			#navigation{
				text-align:center;
				margin:20px auto;
			}
			.item{
				padding:0px 15px;
				text-decoration:none;
				color:black;
				border-right:1px solid black;
			}
			.item:hover{
				color:blue;
			}
			.active{
				color:red;
			}
		</style>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="navigation">
			<a href="#"  class="item active">首页</a>
			<a href="#"  class="item">办公家具</a>
			<a href="#"  class="item">数码科技</a>
			<a href="#"  class="item">母婴</a>
			<a href="#"  class="item">团购</a>
			<a href="#"  class="item" style="border:none;">秒杀活动</a>
		</div>
		
		<script type="text/javascript">
			$(".item").click(function(){
				var index = $(this).index();
				$(".item").removeClass("active");
				$(".item").eq(index).addClass("active");
			})
			
			
		</script>
	</body>
</html>